<template>
    <div class="box">
      <Head :url="imageUrl"></Head>
      <main>
          <h2>{{userInfo.who | quan}}信息</h2>
          <ul>
              <li>姓名:{{userInfo.username}}</li>
              <li>注册时间:{{userInfo.time}}</li>
              <li>权限：{{userInfo.who | quan}}</li>
              <li>{{userInfo.who | quan}}ID：{{userInfo.Id}}</li>
              <li>更换头像：
                 <el-upload
                    class="avatar-uploader"
                    action="/myE/addUserImg"
            
                    :data="{Id:userInfo.Id,username:userInfo.username}"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus fei avatar-uploader-icon"></i>
                    </el-upload>
                 
              </li>
          </ul>
      </main>
    </div>
</template>

<script>
import Head from '../components/head'
import {mapState} from 'vuex'
// import {ajax_userImg} from '../ajax/index'
export default {
    name: '',
    data(){
       return{
            imageUrl: ``
       }
    },
    inject:['reload'],
    created(){
        // console.log(this.userInfo)
          this.imageUrl=`http://127.0.0.1:8888/imgs/user/${this.userInfo.user_img}`
    
    },
     filters:{
       quan(e){
           console.log(e)
           if(e==11){
               return "超级管理员"
           }else if(e==1){
               return "管理员"
           }else{
               return "商户"
           }
       }
    },
    methods:{
   
      handleAvatarSuccess(res, file) {
        console.log(file,res.data[0])
        this.imageUrl = URL.createObjectURL(file.raw);
        this.$router.go(0);
        // this.$store.commit("setUser",res.data[0])
        // this.reload()
      },
      beforeAvatarUpload(file) {
        //   console.log(file)
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
    components:{
        Head,
    },
    computed:{
        ...mapState(['userInfo'])
    }
}
</script>

<style scoped>
main{
    width:60% ;
    margin: 0 auto;
    
}
main >>> .fei{
    border: 1px dashed rgb(128, 128, 224);
    border-radius: 10px;
}
main h2{
    width:120px;
    margin: 20px auto;
    text-align: center;
}
main ul{
    width: 90%;
    margin: 0 auto;
    background-color: #f9fafc;
    padding:20px;
    text-align: left;
    
}
main li{
    list-style: none;
    margin:30px 0;
    margin-left: 30px;
}
label{
    display: block;
    width: 100px;
    height: 100px;
    /* background-color: red; */
    border: 1px dotted red;
    border-radius: 10px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
    
    border-radius: 10px; 
  }
</style>